<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css">
    <link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/userInfo.css">
    <script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/grid.locale-en.js"></script>
    <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
    <div  class="user_info"  id="userInfo" >
        <table class="userForm">
            <caption>用户信息录入/处理</caption>
            <tbody>
                <tr>
                    <td width="170">姓名:<input type="text" v-model="addArr.name"></td>
                    <td width="170">手机:<input type="text" v-model="addArr.phoneNum"></td>
                    <td width="170">密码:<input type="text" v-model="addArr.password"></td>
                    <td colspan="2" width="120">
                        <a href="javascript:void(0);" @click.once="submitUser">录入</a>
                        <a href="javascript:void(0);" @click.once="resetUser">重置</a>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        搜索:<input v-model="searchTxt" type="text" class="searchInput">
                    </td>
                    <td>
                        排序字段:
                        <select v-model="sortKey">
                            <option value="createDate">创建时间</option>
                            <option value="id">用户编号</option>
                        </select>
                    </td>
                    <td>
                        排序类型:
                        <select v-model="sortClass">
                            <option value="1">升序</option>
                            <option value="-1">降序</option>
                        </select>
                    </td>
                    <td colspan="2"></td>
                </tr>
            </tbody>
        </table>

        <table class="userList" id="userList">
            <caption>用户信息列表</caption>
            <thead>
                <th width="170">编号</th>
                <th width="170">姓名</th>
                <th width="170">手机</th>
                <th width="170">创建日期</th>
                <th colspan="2" width="120">操作</th>
            </thead>
            <tbody>
                <tr v-for="item in userArr ">
                    <td><div class="content">{{item.id}}<input v-model="editArr.id" type="text" v-if="item.id==nowEditCol"></div> </td>
                    <td><div class="content">{{item.name}}<input v-model="editArr.name" type="text" v-if="item.id==nowEditCol"></div> </td>
                    <td><div class="content">{{item.phoneNum}}<input v-model="editArr.phoneNum" type="text" v-if="item.id==nowEditCol"></div> </td>
                    <td><div class="content">{{item.createDate}}<input v-model="editArr.createDate" type="text" v-if="item.id==nowEditCol"></div> </td>
                    <td>
                        <a href="javascript:void(0);" @click="startEdit(item.id)" v-if="item.id!=nowEditCol">编辑</a>
                        <a href="javascript:void(0);" @click="cancelEdit" v-if="item.id==nowEditCol">取消</a>
                        <a href="javascript:void(0);" @click="sureEdit(item.id)" v-if="item.id==nowEditCol">确认</a>
                    </td>
                    <td><a href="javascript:void(0);" @click="deleteUser(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>

    </div>
    <script src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/demo/userInfo.js"></script>
</body>
</html>